<template>
  <div class="index">
    <b-modal ref="myWarning1" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>未搜索到满足条件专辑!</h4>
      </div>
    </b-modal>

    <div class="top2"></div>
    <b-container>
      <div class="title" style="text-align: center">
        <h5 style="text-shadow: 2px 2px 8px #00FA9A;">艺人搜索结果</h5>
      </div>
      <br />
      <b-table
        :striped="striped"
        :bordered="bordered"
        :outlined="outlined"
        :small="small"
        :hover="hover"
        :dark="dark"
        :fixed="fixed"
        :foot-clone="footClone"
        :head-variant="light"
        :items="artistList"
        :fields="fields1"
        style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px; padding: 5px; background-color: rgba(0,0,0,0.8)"
        v-if="artistList.length > 0 & artistList[0] != 1"
      >
        <template v-slot:cell(imagealias)="data">
          <router-link
            :to="{path: '/artist/'+data.item.alias}"
          >
            <img :src="`${data.item.image}`" title style="width:120px;" />
          </router-link>
        </template>
        <template v-slot:cell(namealias)="data">
          <router-link target="_blank"
            :to="{path: '/artist/'+data.item.alias}"
          >{{data.item.name}}</router-link>
        </template>
        <template v-slot:cell(category)="data">{{category[data.value]}}</template>
      </b-table>
      <br />

      <div class="title" style="text-align: center">
        <h5 style="text-shadow: 2px 2px 8px #00FA9A;">专辑搜索结果</h5>
      </div>
      <br />
      <b-table
        :striped="striped"
        :bordered="bordered"
        :outlined="outlined"
        :small="small"
        :hover="hover"
        :dark="dark"
        :fixed="fixed"
        :foot-clone="footClone"
        :head-variant="light"
        :items="albumList"
        :fields="fields2"
        style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 12px; padding: 5px; background-color: rgba(0,0,0,0.8)"
        v-if="albumList.length > 0 & albumList[0] != 1"
      >
        <template v-slot:cell(date)="data">
          <span v-if="data.value">{{data.value.substring(0,4)}}</span>
        </template>
        <template v-slot:cell(covernameartist)="data">
          <router-link target="_blank"
            :to="{path: '/artist/'+data.item.artist.alias+'/album', query: {name: `${data.item.alias}`}}"
          > 
            <img :src="`${data.item.cover}`" title class="placeholder60"/>
          </router-link>
        </template>
        <template v-slot:cell(nameartist)="data">
          <router-link target="_blank"
            :to="{path: '/artist/'+data.item.artist.alias+'/album', query: {name: `${data.item.alias}`}}"
          >{{data.item.name | truncate}}</router-link>
        </template>
        <template v-slot:cell(artist)="data">
          <router-link target="_blank"
            :to="{path: '/artist/'+data.value.alias}"
          >{{data.value.name}}</router-link>
        </template>
        <template v-slot:cell(category2)="data">{{dict_album[data.value]}}</template>
        <template v-slot:cell(rating_amg.img)="data">
          <img :src="`${data.value}`" title style="width:70px" />
        </template>
        <template v-slot:cell(rating_home.img)="data">
          <img :src="`${data.value}`" title style="width:70px" />
        </template>
        <template v-slot:cell(review_length)="data">
          <img :src="url_review" title v-if="data.value" />
        </template>
      </b-table>
      <br />
    </b-container>
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      artistList: [],
      albumList: [],

      fields1: [
        {
          key: 'imagealias',
          label: '照片',
          class: 'text-center',
        },
        {
          key: 'namealias',
          label: '艺人名',
          class: 'text-center',
        },
        {
          key: 'name_chs',
          label: '中文名',
          class: 'text-center',
        },
        {
          key: 'category',
          label: '类别',
          class: 'text-center',
        },
      ],

      fields2: [
        {
          key: 'date',
          label: '年份',
          sortable: true,
          class: 'text-center',
        },
        {
          key: 'covernameartist',
          label: '封面',
          class: 'text-center',
        },
        {
          key: 'nameartist',
          label: '专辑名称',
        },
        {
          key: 'artist',
          label: '艺人',
          sortable: true,
        },
        {
          key: 'category2',
          label: '类型',
          sortable: true,
          class: 'text-center',
        },
        {
          key: 'rating_amg.img',
          label: 'AllMusic评级',
        },
        {
          key: 'rating_home.img',
          label: '本站评级',
        },
        {
          key: 'review_length',
          label: '评论',
          class: 'text-center',
        },
      ],
      striped: false,
      bordered: false,
      outlined: false,
      small: true,
      hover: true,
      dark: true,
      fixed: false,
      footClone: false,
      light: 'light',
      rate_amg: null,
      rate_home: null,
      category1: null,
      category2: null,
      awards: null,
      url_review: require('@/assets/img/index/review.png'),
      category: {
        britpop: '英伦摇滚乐',
        classic: '经典老摇滚',
        electronic: '英国电子乐',
        female: '英伦玫瑰',
        male: '英伦男歌手',
        shoegaze: '自赏派音乐',
        scotland: '苏格兰流行乐',
        ireland: '爱尔兰流行乐',
		indie: '新生代独立音乐',
      },
	  dict_album: { studio: '录音室专辑', live: '现场专辑', compilation: '精选专辑', ep: 'EP', single: '单曲', video: '录影带' },
    };
  },
  filters: {
      truncate: function(value) {
        if (value.length <= 48) {
		  return value;
		} else {
		  return value.substr(0, 48) + "...";
		}
      }
  },
  methods: {
    searchArtist() {
      this.$axios
        .get('/api/artists-search/', { params: { artist: this.$route.query.searchVal, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.artistList = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    searchAlbum() {
      this.$axios
        .get('/api/albums-search/', { params: { album: this.$route.query.searchVal, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.albumList = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  head() {
    return {
      title: '搜索 | 英伦留声机',
    };
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    this.$route.meta.title = '搜索 | 英伦留声机';
    document.title = this.$route.meta.title;
    this.searchArtist();
    this.searchAlbum();
  },
  watch: {
    $route(to, from) {
      this.searchArtist();
      this.searchAlbum();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
a.page-link {
  color: #222222;
  cursor: pointer;
}
a.page-link:hover {
  color: #999999;
  cursor: pointer;
}
a.page-link:active {
  color: #999999;
  cursor: pointer;
}
a.page-link:visited {
  color: #222222;
  cursor: pointer;
}

a:not([href]):not([tabindex]) {
  color: #222222;
}

.placeholder60 {
    width: 60px;
	min-height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(~@/assets/img/background/album_60x60.png);
}

</style>

<!--<style src="../assets/css/link.css"></style>-->
<!--<style src="../assets/css/font.css"></style>-->
<!--<style src="../assets/css/global.css"></style>-->

